<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>对账管理</el-breadcrumb-item>
      <el-breadcrumb-item>批量调价(渠道)</el-breadcrumb-item>
    </el-breadcrumb>

    <Container class="u-mb15">
      <el-form
        inline
        class="m-form--filter"
      >
        <el-form-item>
          <el-date-picker
            size="mini"
            class="u-w160"
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            v-model="channel_items.model_value"
            :placeholder="channel_items.placeHolder"
            filterable
            @change="select('3',channel_items.model_value)"
          >
            <el-option
              v-for="item in channel_items.options"
              :key="item.channelCode"
              :label="item.name"
              :value="item.channelCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            v-model="customer_items.model_value"
            :placeholder="customer_items.placeHolder"
            filterable
            @change="select('1',customer_items.model_value)"
          >
            <el-option
              v-for="item in customer_items.options"
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            v-model="pro_items.model_value"
            :placeholder="pro_items.placeHolder"
            @change="select('2',pro_items.model_value)"
            filterable
          >
            <el-option
              v-for="item in pro_items.options"
              :key="item.productCode"
              :label="item.productName"
              :value="item.productCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            v-model="channelPro_items.model_value"
            :placeholder="channelPro_items.placeHolder"
            @change="select('4',channelPro_items.model_value)"
            filterable
          >
            <el-option
              v-for="item in channelPro_items.options"
              :key="item.customerProductCode"
              :label="item.productChannelCode"
              :value="item.customerProductCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="businessTypeModel"
            size="mini"
            class="u-w160"
            filterable
            clearable
            placeholder="业务类型"
          >
            <el-option
              v-for="item in BUSINESS_TYPE"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="pageInfo"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-button
            size="mini"
            @click="changePriceBut"
          >批量修改</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form>

      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          align="center"
          v-for="(c, i) in filterTableColumn"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          :formatter="c.format"
          :width="c.width"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <span
              class="u-cursor"
              v-if="scope.row.validStatus=='button'"
              @click="checkAllEvent"
            >{{checkAll ? '全选' : '取消全选'}}</span>
            <el-checkbox
              v-else
              v-model="scope.row.validStatus"
            ></el-checkbox>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.currentPage"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, prev, pager, next, sizes, jumper"
        :total="page.count"
      >
      </el-pagination>

      <el-dialog
        title="批量修改"
        :visible.sync="dialogVisible"
        width="450px"
      >
        <el-form
          label-width="110px"
          :model="dialogDateData"
          :rules="dialogDateRules"
          ref="dialogDateForm"
        >
          <el-form-item
            label="选择日期："
            required
            prop="date"
          >
            <el-date-picker
              class="u-w300"
              v-model="dialogDateData.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="修改价格："
            class="u-mb0"
            required
            prop="price"
          >
            <el-input
              class="u-w300"
              type="number"
              v-model="dialogDateData.price"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="changePriceSub"
          >确 定</el-button>
        </span>
      </el-dialog>
    </Container>
  </div>
</template>

<script>
import Container from "@/components/container";
import CustomTableColumn from "@/components/custom-table-column";
import BusinessTypeMixin from "@/mixins/business-type";
export default {
  name: "cpa-account-channels",
  components: {
    Container,
    CustomTableColumn
  },
  mixins: [BusinessTypeMixin],
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      dialogDateData: {
        date: null,
        price: null
      },
      dialogDateRules: {
        date: {
          required: true,
          message: "请选择日期",
          trigger: ["change", "blur"]
        },
        price: {
          required: true,
          message: "请输入价格",
          trigger: ["change", "blur"]
        }
      },
      loading: false,
      checkAll: true,
      tableColumn: [
        {
          prop: "customerName",
          label: "客户名称",
          visible: true
        },
        {
          prop: "productName",
          label: "产品名称",
          visible: true
        },
        {
          label: "业务类型",
          prop: "cooperativeMode",
          visible: true
        },
        {
          prop: "packageName",
          label: "上游渠道号",
          visible: true,
          width: 280
        },
        {
          prop: "currentPrice",
          label: "价格",
          visible: true
        }
      ],
      dateValue: new Date(),
      page: {
        sizes: [10, 50, 100, 500],
        offset: 1,
        limit: 10,
        count: 0,
        currentPage: 1
      },
      menu_nav: ["CPA数据管理", "渠道批量改价格"],
      channel_items: {
        model_value: "",
        placeHolder: "渠道",
        options: []
      },
      customer_items: {
        model_value: "",
        placeHolder: "客户",
        options: []
      },
      pro_items: {
        model_value: "",
        placeHolder: "产品",
        options: []
      },
      channelPro_items: {
        model_value: "",
        placeHolder: "上游渠道号",
        options: []
      },
      params: {
        type: "",
        val: "",
        date: "",
        price: ""
      },
      tableData: [],
      idList: [],
      contractNo: "",
      businessTypeModel: ""
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    }
  },
  created() {
    this.channelInfo();
    this.dateChange();
  },
  methods: {
    channelInfo() {
      /*渠道*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelSearch,
        params: {
          offset: 1,
          limit: 9999,
          val: ""
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            data.items.length > 0
              ? (this.channel_items.options = data.items)
              : null;
          }
        })
        .catch(() => {});
    },
    customerInfo() {
      /*客户*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProListCustomer,
        params: {
          channelCode: this.channel_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.customer_items.options = data.customerItems;
          }
        })
        .catch(() => {});
    },
    proInfo() {
      /*产品*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProList,
        params: {
          customerCode: this.customer_items.model_value,
          channelCode: this.channel_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.pro_items.options = data.items;
          }
        })
        .catch(() => {});
    },
    channelPro() {
      /*上游渠道号*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProListPack,
        params: {
          productCode: this.pro_items.model_value,
          channelCode: this.channel_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.channelPro_items.options = data.items;
          }
        })
        .catch(() => {});
    },
    pageInfo() {
      if (!this.params.date) {
        this.$message({
          type: "info",
          message: "请选择日期"
        });
        return false;
      } else if (this.channel_items.model_value == "") {
        this.$message({
          type: "info",
          message: "请选择渠道"
        });
        return false;
      }
      /*列表*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProListPackage,
        params: {
          offset: this.page.offset,
          limit: this.page.limit,
          datetime: this.params.date,
          channelCode: this.channel_items.model_value,
          type: this.params.type != 3 ? this.params.type : null,
          code: this.params.type != 3 ? this.params.val : null,
          bizType: this.businessTypeModel
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.page.count = data.totalNums;
            for (let row of data.items) {
              row.validStatus = false;
            }
            data.items.length > 0
              ? data.items.unshift({ validStatus: "button" })
              : null;
            this.checkAll = true;
            this.tableData = data.items;
            this.idList = [];
          }
        })
        .catch(() => {});
    },
    select(type, val) {
      if (val != "" && typeof val != "undefined") {
        this.params.type = type;
        this.params.val = val;
        switch (type) {
          case "3":
            this.customer_items.model_value = this.pro_items.model_value = this.channelPro_items.model_value =
              "";
            this.pro_items.options = this.channelPro_items.options = [];
            this.customerInfo();
            break;
          case "1":
            this.pro_items.model_value = this.channelPro_items.model_value = "";
            this.channelPro_items.options = [];
            this.proInfo();
            break;
          case "2":
            this.channelPro_items.model_value = "";
            this.channelPro();
            break;
        }
      }
    },
    handleCurrentChange(val) {
      this.page.offset = val;
      this.pageInfo();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.pageInfo();
    },
    dateChange() {
      if (this.dateValue != "" && typeof this.dateValue != "undefined") {
        this.params.date = this.formatDateTime(this.dateValue, "y-m-d");
      } else {
        this.params.date = "";
      }
    },
    /*全选事件*/
    checkAllEvent() {
      let flag = true;
      for (let item of this.tableData) {
        if (item.validStatus != "button") {
          item.validStatus = this.checkAll;
          flag = false;
        }
      }
      if (flag) return false;
      this.checkAll = !this.checkAll;
    },
    changePriceBut() {
      this.idList = [];
      for (let item of this.tableData) {
        item.validStatus && item.validStatus != "button"
          ? this.idList.push(item.channelProductCode)
          : null;
      }
      if (this.idList.length == 0) {
        this.$message({
          type: "info",
          message: "请选择操作项"
        });
        return false;
      }
      this.$refs.dialogDateForm && this.$refs.dialogDateForm.resetFields();
      this.dialogVisible = true;
    },
    changePriceSub() {
      this.$refs.dialogDateForm.validate(valid => {
        if (valid) {
          this.changePriceApi();
        }
      });
    },
    changePriceApi() {
      this.dialogVisible = false;
      this.loading = true;
      this.$http({
        method: "post",
        url: this.apiUrl.channelProUpdatePackPrice,
        data: {
          startTime: this.dialogDateData.date[0],
          endTime: this.dialogDateData.date[1],
          channelProductCode: this.idList,
          prices: this.dialogDateData.price
        }
      })
        .then(res => {
          this.loading = false;
          if (res.status === 200) {
            if (res.data.status == 1) {
              this.$message({
                type: "success",
                message: res.data.msg
              });
              this.pageInfo();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message({
            type: "error",
            message: err.response.data
          });
        });
    }
  }
};
</script>
